<template>
	<div class="app-container">
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane label="待审核" name="first">
				<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px" v-show="showSearch">
					<el-form-item label="任务编号" prop="taskNum">
						<el-input v-model="queryParams.taskNum" placeholder="请输入任务编号" clearable />
					</el-form-item>
					<el-form-item label="任务名称" prop="taskName">
						<el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable />
					</el-form-item>
					<el-form-item label="任务管理员" prop="taskManager">
						<el-input v-model="queryParams.taskManager" placeholder="请输入任务管理员" clearable />
					</el-form-item>
					<el-form-item label="省" prop="province">
						<el-select v-model="queryParams.province" placeholder="请选择省" @change="chooseProvince" clearable value-key="id">
							<el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="市" prop="city">
						<el-select v-model="queryParams.city" placeholder="请选择市" @change="chooseCity" clearable value-key="id">
							<el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="区/县" prop="county">
						<el-select v-model="queryParams.county" placeholder="请选择区/县" @change="chooseCounty" clearable value-key="id">
							<el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleQuery">搜索</el-button>
						<el-button plain @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>

				<el-row :gutter="10" class="mb8">
					<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
				</el-row>

				<el-table v-loading="loading" :data="dataList" stripe>
					<el-table-column label="任务编号" align="center" prop="taskNum" />
					<el-table-column label="任务名称" align="center" prop="taskName">
						<template #default="scope">
              <el-popover placement="top-start" title="退回原因" :width="200" trigger="hover" v-if="false"
                  :content="scope.row.taskName">
                  <template #reference>
                      <span @click="handleCause(scope.row)" style="color: #F56C6C; cursor: pointer;">【退回原因】</span>
                  </template>
              </el-popover>         
              <span @click="handleDeatil(scope.row.taskId)"
                  style="color: var(--el-color-primary); cursor: pointer;">{{scope.row.taskName}}</span>
          	</template>
          </el-table-column>
					<el-table-column label="任务管理员" align="center" prop="taskManager" />	
					<el-table-column label="简本报告" align="center" prop="userUploadSimpleReportName" width="380">
	        	<template #default="scope">
	            <el-button type="text" @click="handleDownloadPort1(scope.row)">{{
	              scope.row.userUploadSimpleReportName
	            }}</el-button>
	      		</template>
	      	</el-table-column>
	      	<el-table-column label="详本报告" align="center" prop="userUploadMinuteReportName" width="380">
	        	<template #default="scope">
	            <el-button type="text" @click="handleDownloadPort2(scope.row)">{{
	              scope.row.userUploadMinuteReportName
	            }}</el-button>
	      		</template>
	      	</el-table-column>					
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300px">
						<template #default="scope">
							<el-button type="text" @click="adopt(scope.row)">通过</el-button>
							<el-button type="text" @click="unadopt(scope.row)">不通过</el-button>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" />
			</el-tab-pane>
			<el-tab-pane label="审核记录" name="second">
				<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px" v-show="showSearch">
					<el-form-item label="任务编号" prop="taskNum">
						<el-input v-model="queryParams.taskNum" placeholder="请输入任务编号" clearable />
					</el-form-item>
					<el-form-item label="任务名称" prop="taskName">
						<el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable />
					</el-form-item>
					<el-form-item label="审核结果" prop="reviewStatus">
            <el-select v-model="queryParams.reviewStatus" placeholder="请选择">
              <el-option v-for="item in [{ value: '0', label: '通过' }, { value: '1', label: '不通过' }]" :key="item.value"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
					<el-form-item label="任务管理员" prop="taskManager">
						<el-input v-model="queryParams.taskManager" placeholder="请输入任务管理员" clearable />
					</el-form-item>
					<el-form-item label="省" prop="province">
						<el-select v-model="queryParams.province" placeholder="请选择省" @change="chooseProvince" clearable value-key="id">
							<el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="市" prop="city">
						<el-select v-model="queryParams.city" placeholder="请选择市" @change="chooseCity" clearable value-key="id">
							<el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="区/县" prop="county">
						<el-select v-model="queryParams.county" placeholder="请选择区/县" @change="chooseCounty" clearable value-key="id">
							<el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleQuery1">搜索</el-button>
						<el-button plain @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>
				<el-row :gutter="10" class="mb8">
					<right-toolbar v-model:showSearch="showSearch" @queryTable="getList1"></right-toolbar>
				</el-row>

				<el-table v-loading="loading" :data="dataList" stripe>
					<el-table-column label="任务编号" align="center" prop="taskNum" />
					<el-table-column label="任务名称" align="center" prop="taskName">
						<template #default="scope">
              <el-popover placement="top-start" title="退回原因" :width="200" trigger="hover" v-if="false"
                  :content="scope.row.taskName">
                  <template #reference>
                      <span @click="handleCause(scope.row)" style="color: #F56C6C; cursor: pointer;">【退回原因】</span>
                  </template>
              </el-popover>         
              <span @click="handleDeatil(scope.row.taskId)"
                  style="color: var(--el-color-primary); cursor: pointer;">{{scope.row.taskName}}</span>
          	</template>
          </el-table-column>
					<el-table-column label="任务管理员" align="center" prop="taskManager" />	
					<el-table-column label="简本报告" align="center" prop="userUploadSimpleReportName" width="380">
	        	<template #default="scope">
	            <el-button type="text" @click="handleDownloadPort1(scope.row)">{{
	              scope.row.userUploadSimpleReportName
	            }}</el-button>
	      		</template>
	      	</el-table-column>
	      	<el-table-column label="详本报告" align="center" prop="userUploadMinuteReportName" width="380">
	        	<template #default="scope">
	            <el-button type="text" @click="handleDownloadPort2(scope.row)">{{
	              scope.row.userUploadMinuteReportName
	            }}</el-button>
	      		</template>
	      	</el-table-column>
					<el-table-column label="审核结果" align="center" prop="reviewStatus">
						<template #default="scope">
							<span v-if="scope.row.reviewStatus=='0'">通过</span>
							<span v-if="scope.row.reviewStatus=='1'">								
		            <el-button type="text" @click="viewUnadopt(scope.row)">
	              		不通过</el-button>
							</span>
						</template>
					</el-table-column>
					<el-table-column label="审核时间" align="center" prop="reviewTime" width="200"/>
					
				</el-table>

				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList1" />
			</el-tab-pane>
		</el-tabs>
		<!--弹出框 -->
		<el-dialog :title="title" v-model="open" append-to-body>
			<p class="dialogTitle">{{ title }}</p>
				<el-form ref="annualriskRef" :model="form" :rules="rules" label-width="120px">
      	<el-row>
      		<el-col :span="12">
      			<el-form-item label="审核结果" prop="reviewStatus">
		          不通过
		        </el-form-item>
      		</el-col>     		
      	</el-row>

        <el-form-item label="不通过原因" prop="reviewOpinion">
          <el-input v-model="form.reviewOpinion" type="textarea" maxlength="100" rows="6"  show-word-limit/>
        </el-form-item>        
     	</el-form>	
			<p></p>
			<template #footer>
				<div class="dialog-footer">
				 	<el-button type="primary" @click="submitForm" v-if="isShow">确定</el-button> 
					<el-button plain @click="cancel">关闭</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 查看弹出框 -->
    <el-dialog v-model="openDetail" title="查看任务" width="900px">
      <detailAssess :detilList="detilList" />
    </el-dialog>
		
	</div>
</template>

<script setup name="reportCheck">
	import { getProvince, getChildArea } from "@/api/system/division";
	import { getAllList, getReviewRecordPage, getReport, reportCreat, canceCreat, saveList, detailTask } from "@/api/resultManag/reportCheck.js";
	import detailAssess from "../../taskmanage/assess/detailAssess.vue";
	const {
		proxy
	} = getCurrentInstance();
	const activeName = ref("first");
	const dataList = ref([]);
	const loading = ref(false);
	const open = ref(false);
	const openCreate = ref(false);
	const openDetail = ref(false);
	const isShow = ref(true);
	const total = ref(0);
	const title = ref("");
	const showSearch = ref(true);
	const percentages = ref();
	const provinceData = ref([]); //省
	const cityData = ref([]); //市
	const areaData = ref([]); //区、县
	
	const detilList = reactive({
	  preAssessTaskEntity: {
	    taskYear: undefined,
	    taskNum: undefined,
	    taskName: undefined,
	    taskArea: undefined,
	    taskRegion: undefined,
	    districtList: undefined,
	    groupName: undefined,
	    groupLeader: undefined,
	    taskDistrict: undefined,
	  },
	  expertlist: undefined,
	  memberlist: "",
	});
	const data = reactive({
		form: {
			reportId: undefined,
			reviewStatus: '1',
			reviewOpinion: undefined,
		},
		formData: {},
		queryParams: {
			page: 1,
			rows: 10,
			taskNum: undefined,
			taskName: undefined,
			taskManager: undefined,
			reviewStatus: undefined,
			province: undefined,
			city: undefined,
			county: undefined,
			reportStatus:undefined,
		},
		rules: {
	    reviewOpinion: [
	      { required: true, message: "不通过原因不能为空", trigger: "blur" },
	    ],
	  },
	})
	const {
		queryParams,
		form,
		formData,
		rules
	} = toRefs(data)
	/** 搜索按钮操作 */
	function handleQuery() {
		queryParams.value.page = 1;
		getList();
	}
	/** 搜索按钮操作 */
	function handleQuery1() {
		queryParams.value.page = 1;
		getList1();
	}
	/** 重置按钮操作 */
	function resetQuery() {
		dataList.value = [];
		cityData.value = [];
		areaData.value = [];
		proxy.resetForm("queryRef");
		console.log(activeName)
		if(activeName.value == 'first'){
			handleQuery();
		}else if(activeName.value == 'second'){
			handleQuery1()
		}
	}

	// 重置表单
	function reset() {
		form.value = {
			reportId: undefined,
			reviewStatus: '1',
			reviewOpinion: undefined,
		}
	}

	/** 查询待审核任务列表 */
	function getList() {
		loading.value = true;
		getAllList(queryParams.value).then(response => {
			dataList.value = response.data.rows;
			total.value = response.data.total;
			loading.value = false;
		});
	}
	/** 查询报告任务列表 */
	function getList1() {
		loading.value = true;
		//queryParams.value.submitReportStatus = "1";
		getReviewRecordPage(queryParams.value).then(response => {
			dataList.value = response.data.rows;
			total.value = response.data.total;
			loading.value = false;
		});
	}
	// 下载简本报告文件
	function handleDownloadPort1(row) {
	  proxy.download("/report/downloadReport", {
	    reportId:row.reportId,type:"1",def:"2"
	  },row.userUploadSimpleReportName);
	};
	// 下载详本报告文件
	function handleDownloadPort2(row) {
	  proxy.download("/report/downloadReport", {
	    reportId:row.reportId,type:"2",def:"2"
	  },row.userUploadMinuteReportName);
	};

	/** 取消按钮 */
	function cancel() {
		open.value = false;
		reset();
	}

	/** 获取省列表 */
	function getProvinceData() {
		getProvince().then((response) => {
			provinceData.value = response.data;
		});
	}
	function handleDeatil(id){
		openDetail.value = true;
	  detailTask({ id: id }).then((response) => {
	    nextTick(() => {
	      detilList.preAssessTaskEntity = response.data.preAssessTaskEntity;
	      detilList.memberlist = response.data.memberlist;
	      detilList.expertlist = response.data.expertlist;
	    });
	  });
	}
	/*通过*/
	function adopt(row){
		saveList({
      reportId: row.reportId,
      reviewStatus: "0",
      reportStatus: "4",
    }).then((res) => {	      	
				proxy.$modal.msgSuccess("审核成功");
		  	getList();
    });
	}
	/*不通过*/
	function unadopt(row){
		title.value = "不通过原因"
		open.value = true;
		form.value.reportId = row.reportId
		
	}
	function viewUnadopt(row){
		title.value = "不通过原因"
		open.value = true;
		form.value.reportId = row.reportId;
		form.value.reviewOpinion = row.reviewOpinion;
	}
	function submitForm(){
		proxy.$refs["annualriskRef"].validate(valid => {
	    if (valid) {	      
	      saveList({
	        reportId: form.value.reportId,
	        reviewStatus: form.value.reviewStatus,
	        reportStatus: "2",
	        reviewOpinion: form.value.reviewOpinion,
	      }).then((res) => {	      	
						proxy.$modal.msgSuccess("审核成功");
						open.value = false;
				  	getList();
	      });		    
	    }	    
	  });
	}

	function chooseProvince(value) {
		queryParams.value.city = null;
		queryParams.value.county = null;
		queryParams.value.province = value.name;
		cityData.value = [];
		areaData.value = [];
		getChildArea(value.id).then(response => {
			cityData.value = response.data;
		});
	}

	function chooseCity(value) {
		queryParams.value.city = value.name;
		queryParams.value.county = null;
		areaData.value = [];
		getChildArea(value.id).then((response) => {
			areaData.value = response.data;
		});
	}

	function chooseCounty(value) {
		queryParams.value.county = value.name;
	}
	/*切换标签页*/
	function handleClick(tab, event) {
		console.log(tab.props.name);
		if(tab.props.name == "first") {
			getList();
			isShow.value = true;
		} else {
			getList1();
			isShow.value = false;
		}
	}
	getProvinceData();
	getList();
</script>

<style lang="scss" scoped>
	h3 {
		color: #333;
		height: 21px;
		font-size: 14px;
		line-height: 21px;
		display: flex;
		align-items: center;
		font-weight: bold;
		span {
			margin-right: 12px;
			display: inline-block;
			width: 3px;
			height: 14px;
			background: #333;
		}
	}

	.footer {
		text-align: center;
	}
</style>